<template>
    <div class="main-assign">
        <div class="main-task" v-if="myValue['target']">
            <div v-show="myValue['target']['type'] === 'go_spot_send'">
                <div>站点</div>
                <div class="select-input" style="height: auto;line-height: 20px;padding: 6px 0px 6px 10px"  @click="selectSite" v-if="siteName">{{siteName}}</div>
                <div class="select-input" style="color:#909399;height: auto;line-height: 20px;padding: 6px 0px 6px 10px" @click="selectSite" v-else>站点</div>
                <van-actionsheet :close-on-click-overlay="false" v-model="showSelectSite">
                    <site-select v-model="myValue['target']['spot_id']" :option="option" @closeActionSheet="closeActionSheet" @selectSiteName="selectSiteName" style="width: 100%;"></site-select>
                </van-actionsheet>


                <div >
                    <div style="margin-top: 0.05rem">对接人(不选就是站长)</div>
                    <div class="select-input" style="height: auto;line-height: 20px;padding: 6px 0px 6px 10px"  @click="selectSpotPeople"  v-if="spotPeopleName">{{spotPeopleName}}</div>
                    <div class="select-input"  style="color:#909399;height: auto;line-height: 20px;padding: 6px 0px 6px 10px" @click="selectSpotPeople" v-else>对接人(不选就是站长)</div>
                    <van-actionsheet :close-on-click-overlay="false" v-model="showSelectSpotPeople">
                        <driver-cascader-jie v-model="myValue['target']['driver_id']" :cascaderOption="cascaderOption" @closeSpotActionSheet="closeSpotActionSheet" @selectSpotSiteName="selectSpotSiteName" palaceName="不选就是站长" style="width: 100%;"></driver-cascader-jie>
                    </van-actionsheet>
                </div>


            </div>
            <div>
                <!--<el-row class="paddbottm" v-show="myValue['target']['type'] !== 'go_null'">-->
                <!--<el-col :span="4" class="alignright">时间：</el-col>-->
                <!--<el-col :span="18">-->
                <!--<el-date-picker-->
                <!--v-model="myValue['limit_time']"-->
                <!--type="datetime"-->
                <!--value-format="yyyy-MM-dd HH:mm:ss"-->
                <!--style="width: 100%;"-->
                <!--placeholder="选择日期时间">-->
                <!--</el-date-picker>-->
                <!--</el-col>-->
                <!--<el-col :span="2" class="alignright">优先级：</el-col>-->
                <!--<el-col :span="8">-->
                <!--<el-input type="number" v-model="myValue['priority']"></el-input>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row class="paddbottm">-->
                <!--<el-col :span="4" class="alignright">备注：</el-col>-->
                <!--<el-col :span="18">-->
                <!--<el-input type="textarea" v-model="myValue['comment']"></el-input>-->
                <!--</el-col>-->
                <!--</el-row>-->
            </div>
        </div>

    </div>
</template>

<script>
    import DriverCascaderJie from '../cascader/Cascader';
    import SiteSelect from '../cascader/Select';
    import {Notify, Button, Row, Col, Toast, Actionsheet} from 'vant';
    export default {
        name: "ExpressAssign",
        components: {
            // SelectAddress,
            SiteSelect,
            DriverCascaderJie,
            [Notify.name]:Notify,
            [Button.name]:Button,
            [Actionsheet.name]:Actionsheet,
            [Row.name]:Row,
            [Toast.name]:Toast,
            [Col.name]:Col
        },
        props: {
            expressModel: {
                type: String | Number,
                default: '0'
            },
            taskIndex: {  // 主任务 后置任务
                type: String | Number,
                default: '1'
            },
            value: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            option: {
                type: Array,
                default: () => {
                    return []
                }
            },
            cascaderOption: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                myValue: {},
                showSelectSite: false,
                showSelectSpotPeople: false,
                siteName: '',
                spotPeopleName: ''
            }
        },
        mounted() {
            this.myValue = this.value;
        },
        watch: {
            value: {
                handler() {
                    this.myValue = this.value;
                },
                deep:true
            },
            myValue: {
                handler(value) {
                    this.$emit('input', value);
                },
                deep: true
            }
        },
        methods: {
            selectSite() {
                this.showSelectSite = true
            },
            closeActionSheet() {
                this.showSelectSite = false
            },
            selectSiteName(val) {
                this.siteName = val;
                this.showSelectSite = false
            },
            selectSpotPeople() {
                this.showSelectSpotPeople = true
            },
            closeSpotActionSheet() {
                this.showSelectSpotPeople = false
            },
            selectSpotSiteName(val) {
                this.spotPeopleName = val;
                this.showSelectSpotPeople = false
            }
        }
    }
</script>

<style scoped lang="less">
    .main-assign {
        .select-input{
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;
            padding-left: 0.08rem;
            margin-top: 0.05rem;
            border: 1px solid #DCDFE6;
            border-radius: 0.04rem;
        }
        .van-actionsheet{
            position: fixed;
            top: 0px;
            left: 0px;
            max-height: 100%;
            height: 100vh;
            z-index: 3000;
        }

    }
</style>
